<script setup>
import {
  Iphone,
  Lock,
  Search,
  User,
  UserFilled,
  Promotion,
  VideoCameraFilled,
  GoodsFilled
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { ref, reactive, computed, onMounted } from 'vue'
import { userLoginService, userRegisterService } from '../../api/auth'
import useGlobalConnection from '../../composables/index/globalConnection'

const userStore = useUserStore()
const router = useRouter()

/* 初始化 */
userStore.updateUserBasicInfo();

/* 登录 */
const loginForm = ref()
const loginFormModel = ref({
  phoneNumber: '',
  password: '',
})
const loginDialogVisible = ref(false);

const loginRules = {
  phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

const login = async () => {
  await loginForm.value.validate()
  const res = await userLoginService(loginFormModel.value)
  userStore.setToken(res.data.data);
  loginDialogVisible.value = false;
  userStore.updateUserBasicInfo();
}

/* 登出 */
const logout = () => {
  userStore.removeToken();
  userStore.removeUserBasicInfo();
}

/* 注册 */
const registerForm = ref()
const registerFormModel = ref({
  phoneNumber: '',
  password: '',
})
const registerDialogVisible = ref(false);

const registerRules = {
  phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

const register = async () => {
  await registerForm.value.validate();
  await userRegisterService(registerFormModel.value);
  loginFormModel.value.phoneNumber = registerFormModel.value.phoneNumber;
  loginFormModel.value.password = registerFormModel.value.password;
  registerDialogVisible.value = false;
  loginDialogVisible.value = true;
}

/* 点击 logo */
const onClickLogo = () => {
  router.push("/");
}

/* 点击头像 */
const onClickAvatar = () => {
  router.push("/self");
}

/* 搜索 */
const searchText = ref('');

/* 建立长连接 */
// useGlobalConnection();

/* 私信聊天功能 */
const chatDrawerVisible = ref(false);

</script>

<template>
  <!-- el-menu：整个菜单组件
    :default-active="$route.path"：配置默认高亮的菜单项
    router：router选项开启, el-menu-item的index就是点击跳转的路径
  el-menu-item：菜单项
    index="/article/channel"：配置的是访问的跳转路径, 配合default-active的值, 实现高亮 -->
  <el-container class="layout-container">
    <el-header>
      <img class="el-header__logo" src="/src/assets/YH_logo.png" @click="onClickLogo">
      <el-input class="el-header__input" v-model="searchText" @keydown.stop @keyup.enter="router.push(`/search?text=${searchText}`)">
        <template #append>
          <el-button class="el-header__search-button" :icon="Search" @click="router.push(`/search?text=${searchText}`)"/>
        </template>
      </el-input>

      <div class="el-header__right">
        <el-icon class="right-item" @click="router.push('/_ai')">
          <div class="right-item-inner-container">
            <AI />
            <div class="right-item-text">AI</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="router.push('/marketplace')">
          <div class="right-item-inner-container">
            <GoodsFilled />
            <div class="right-item-text">商城</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="router.push('/_live/anchor')">
          <div class="right-item-inner-container">
            <Live />
            <div class="right-item-text">直播</div>
          </div>
        </el-icon>        
        <el-icon class="right-item" @click="router.push('/camera')">
          <div class="right-item-inner-container">
            <VideoCameraFilled />
            <div class="right-item-text">拍摄</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="router.push('/creator')">
          <div class="right-item-inner-container">
            <Promotion />
            <div class="right-item-text">投稿</div>
          </div>
        </el-icon>
        <el-icon class="right-item" @click="chatDrawerVisible = true">
          <div class="right-item-inner-container">
            <Chat />
            <div class="right-item-text">私信</div>
          </div>
        </el-icon>

        <el-dropdown v-if="userStore.token">
          <el-avatar :src="userStore.userBasicInfo?.avatarUrl" :icon="UserFilled" fit="fill" @click="onClickAvatar"></el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item @click="logout" divided>
                <el-icon><svg t="1746603489150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3466" width="200" height="200"><path d="M814 65.9H265.7c-80.5 0-146 65.5-146 146V320c0 19.9 16.1 36 36 36s36-16.1 36-36V211.9c0-40.8 33.2-74 74-74H814c40.8 0 74 33.2 74 74v602.6c0 40.8-33.2 74-74 74H265.7c-40.8 0-74-33.2-74-74V704.2c0-19.9-16.1-36-36-36s-36 16.1-36 36v110.3c0 80.5 65.5 146 146 146H814c80.5 0 146-65.5 146-146V211.9c0-80.5-65.5-146-146-146z" p-id="3467"></path><path d="M549.7 680.5c-13.5 14.6-12.6 37.4 2 50.9 6.9 6.4 15.7 9.6 24.4 9.6 9.7 0 19.4-3.9 26.5-11.6l177.4-192c6.5-7 9.6-15.9 9.5-24.8 0.1-8.8-3.1-17.7-9.5-24.8l-177.4-192c-13.5-14.6-36.3-15.5-50.9-2-14.6 13.5-15.5 36.3-2 50.9l121.6 131.6H100c-19.9 0-36 16.1-36 36s16.1 36 36 36h571.8L549.7 680.5z" p-id="3468"></path></svg></el-icon>登出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button :icon="User" type="primary" @click="loginDialogVisible = true" v-else>登录</el-button>   
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-dialog class="auth-dialog" v-model="loginDialogVisible" title="登录">
      <el-form :model="loginFormModel" :rules="loginRules" ref="loginForm" size="large" autocomplete="off" @submit.prevent>
        <el-form-item prop="phoneNumber">
          <el-input
            v-model="loginFormModel.phoneNumber"
            @keyup.enter="login"
            :prefix-icon="Iphone"
            placeholder="手机号"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginFormModel.password"
            @keyup.enter="login"
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login" auto-insert-space>
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="switch-button-div"><span class="switch-button" @click="loginDialogVisible = false; registerDialogVisible = true">注册</span></div>
    </el-dialog>

    <el-dialog class="auth-dialog" v-model="registerDialogVisible" title="注册">
      <el-form :model="registerFormModel" :rules="registerRules" ref="registerForm" size="large" autocomplete="off" @submit.prevent>
        <el-form-item prop="phoneNumber">
          <el-input
            v-model="registerFormModel.phoneNumber"
            @keyup.enter="register"
            :prefix-icon="Iphone"
            placeholder="手机号"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="registerFormModel.password"
            @keyup.enter="register"
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="register" auto-insert-space>
            注册
          </el-button>
        </el-form-item>
      </el-form>
      <div class="switch-button-div"><span class="switch-button" @click="registerDialogVisible = false; loginDialogVisible = true">登录</span></div>
    </el-dialog>
  </el-container>

  <!-- 私信聊天抽屉 -->
  <ChatDrawer v-model="chatDrawerVisible" />

</template>

<style lang="scss" scoped>
@use '/src/assets/variables.scss' as *;

.layout-container {
  height: 100vh;
  background-color: #060716;
  .el-header {
    padding: 8px 20px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;

    &__logo {
      width: 50px;
      height: auto;
      cursor: pointer;
    }

    &__input {
      max-width: 40vw;

      @media (min-width: 768px) {
        width: 30vw;
      }

      @media (min-width: 1024px) {
        width: 25vw;
      }
    }

    &__search-button {

      &:hover {
        background-color: rgb(85, 85, 85);
      }
    }

    &__right {
      display: flex;
      align-items: center;
      height: 100%;
      font-size: 20px;
      user-select: none;

      .right-item {
        cursor: pointer;
        margin-right: 20px;
        color: rgb(220, 215, 215);

        &:hover {
          color: white;
        }

        .right-item-inner-container {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .right-item-text {
            text-align: center;
            font-weight: bolder;
            font-style: normal;
            font-size: 10px;
          }
        }
      }

      .el-dropdown {
        height: 100%;
        width: auto;
        aspect-ratio: 1/1;

        .el-avatar {
          max-width: 100%;
          max-height: 100%;
          min-width: 100%;
          min-height: 100%;
          cursor: pointer;
        }
      }
    }
  }
  .el-main {
    flex: 1;
  }
}

.switch-button-div {
  text-align: right;

  .switch-button {
    cursor: pointer;

    &:hover {
      color: azure;
    }
  }
}
</style>